<template>
  <view class="bg-[#F3F4F6] c-pd">
    <view class="bg-white c-br flex">
      <view class="c-pd"><van-image round width="60px" height="60px" fit="cover" :src="EEquipLogo[props.equip.equipType]" /></view>
      <view class="py-12px px-2 flex-1 overflow-hidden">
        <view class="mb-4 flex items-center">
          <view class="c-text-14 pr-2 c-text-ellipsis w-fit">昵称：{{ state.equipNickName || '未设置' }}</view>
          <i class="i-ri:edit-2-line text-14px c-text-color-grey" @click="showSetEquipPopup('nickName', state.equipNickName)"></i>
        </view>
        <view>
          <text>状态：</text>
          <van-tag v-if="props.equip.equipState === 2" type="success">在线</van-tag>
          <van-tag v-else color="#9C9C9E">离线</van-tag>
          |
          <van-tag v-if="props.equip.errorState === 1" type="danger">报警</van-tag>
          <van-tag v-else type="success">正常</van-tag>
          <text class="ml-6" v-if="props.equip.powerLevel">电量：{{ EEquipPower[props.equip.powerLevel] }}</text>
        </view>
      </view>
    </view>

    <view class="mt-[12px]">
      <van-cell-group inset>
        <van-cell title="设备编号" :value="props.equip.equipCode"></van-cell>
        <van-cell title="设备MAC" :value="props.equip.equipMac"></van-cell>
        <van-cell title="安装区域" is-link :value="state.installArea || '未设置'" @click="showSetEquipPopup('installArea', state.installArea)"></van-cell>
        <van-cell title="实际使用人" is-link :value="state.actualUserName || '未设置'" @click="showSetEquipPopup('owner', props.equip.actualUserId)" v-if="props.equip.equipType === 11 || props.equip.equipType === 12 || props.equip.equipType === 13"></van-cell>
        <!--        :value-class="props.equip.equipState === 2 ? 'text-green' : 'text-gray'"-->
        <van-cell title="报警时段" is-link :value="state.alarmTimeRange.replace(',', '-') || '无'" @click="showSetEquipPopup('alarmTime', state.alarmTimeRange)" v-if="props.equip.equipType === 5"></van-cell>
        <van-cell title="阀门状态" v-if="props.equip.equipType === 4">
          <view v-if="state.valveState === 2"> 无阀门 </view>
          <view v-else>开<van-switch active-color="#ea622c" inactive-color="#07C160" :checked="state.valveState === 1" @change="handleValveChange" />关</view>
        </van-cell>
        <van-cell title="激活日期" :value="props.equip.activeDate"></van-cell>
        <van-cell title="流量截止日期" :value="props.equip.flowEndDate"></van-cell>
      </van-cell-group>
    </view>
    <view class="mt-[12px]">
      <!-- 红外 -->
      <van-cell-group inset v-if="props.equip.equipType === 10">
        <van-cell title="预警模式" :value="props.equip.relationObject.alarmMode === 1 ? '长时间逗留' : '入寝时间段'"></van-cell>
        <van-cell :title="props.equip.relationObject.alarmMode === 1 ? '逗留时长(分钟)' : '入寝时间段'" :value="props.equip.relationObject.alarmTime"></van-cell>
        <!--<van-cell title="无人时长(分钟)" :value="props.equip.relationObject.allowLeaveTime" v-if="props.equip.relationObject.alarmMode === 1"></van-cell>-->
        <van-cell title="未起时间" :value="props.equip.relationObject.latestTime" v-if="props.equip.relationObject.alarmMode === 2"></van-cell>
        <van-cell title="当前是否有人" :value="props.equip.relationObject.existPerson === 1 ? '无人' : '有人'"></van-cell>
      </van-cell-group>
    </view>

    <view class="text-[14px] font-bold mt-[12px]">设备操作</view>
    <view class="grid grid-cols-4 gap-2 c-br c-pd bg-[white] mt-[12px]">
      <view class="flex flex-wrap justify-center items-center" @click="state.showImg = true">
        <i class="i-weui:qr-code-outlined text-[36px]" />
        <view class="mt-[8px] w-[100%] text-center c-text-12"> 设备码 </view>
      </view>
      <view class="flex flex-wrap justify-center items-center" v-if="props.equip.errorState === 1" @click="handleClickOperate('cancelAlarm')">
        <i class="i-material-symbols-light:notifications-off-outline-sharp text-[36px]" />
        <view class="mt-[8px] w-[100%] text-center c-text-12"> 解除报警 </view>
      </view>
      <view class="flex flex-wrap justify-center items-center" v-if="safetyArr.includes(props.equip.equipType)" @click="handleClickOperate('alarmRecord')">
        <i class="i-material-symbols-light:circle-notifications-outline text-[36px]" />
        <view class="mt-[8px] w-[100%] text-center c-text-12"> 报警记录 </view>
      </view>
      <view class="flex flex-wrap justify-center items-center" v-if="props.equip.equipType === 10" @click="showSetEquipPopup('alarmMode', '')">
        <i class="i-material-symbols-light:settings-alert-outline text-[36px]" />
        <view class="mt-[8px] w-[100%] text-center c-text-12"> 预警设置 </view>
      </view>
      <view class="flex flex-wrap justify-center items-center" v-if="props.equip.equipType === 7" @click="handleClickOperate('openCamera')">
        <i class="i-material-symbols-light:camera-video-outline text-[36px]" />
        <view class="mt-[8px] w-[100%] text-center c-text-12"> 查看监控视频 </view>
      </view>
      <!--睡眠仪检测报告、血糖报告、血压报告-->
      <view class="flex flex-wrap justify-center items-center" v-if="ECheckReportType[props.equip.equipType]" @click="handleClickOperate('checkReport')">
        <i class="i-material-symbols-light:content-paste-search-rounded text-[36px]" />
        <view class="mt-[8px] w-[100%] text-center c-text-12"> {{ ECheckReportType[props.equip.equipType] }} </view>
      </view>
      <view class="flex flex-wrap justify-center items-center" @click="handleClickOperate('unbindEquip')">
        <i class="i-material-symbols-light:delete-forever-outline-sharp text-[36px]" />
        <view class="mt-[8px] w-[100%] text-center c-text-12"> 解绑设备 </view>
      </view>
    </view>
  </view>

  <van-popup width :show="state.showImg" @close="state.showImg = false">
    <van-image width="240px" height="240px" fit="cover" :src="props.equip.wxAppUrl" />
  </van-popup>

  <SetEquipInfoPopup :equip-id="props.equip.equipId" :relationId="props.equip.relationId" :type="setInfo.type" :content="setInfo.content" @change-value="handleChangeValue" />
</template>

<script setup lang="ts">
import EquipRequest from '@/request/equipRequest';
import { navigate } from '@/utils/navigate';
import useModal from '@/hooks/useModal';
import useToast from '@/hooks/useToast';
import { ECheckReportType, EEquipLogo, EEquipPower } from '@/enum/equip';
import SetEquipInfoPopup from '@/subcontract/equipment/equipDetail/component/SetEquipInfoPopup.vue';
import { useControllerStore } from '@/store';
//'烟感' = 3,'燃气' = 4,'门磁' = 5,'水浸' = 6,'摄像头' = 7,'SOS' = 8,'跌倒报警器' = 9,'红外探测器' = 10,'睡眠仪' = 11,'血糖仪' = 12,'血压仪' = 13
interface IProps {
  equip: IEquipDetailRes;
}

interface IState {
  showImg: boolean;
  equipNickName: string;
  installArea: string;
  actualUserName: string;
  alarmTimeRange: string;
  valveState: number; //燃气：阀门状态(0.阀门开 1.阀门关 2.无阀门)
}

const { showModal } = useModal();
const { showToast } = useToast();
const props = defineProps<IProps>();
const state = reactive<IState>({ showImg: false, valveState: 2, equipNickName: '', installArea: '', actualUserName: '', alarmTimeRange: '' });
const setInfo = reactive<{ type: string; content: any }>({ type: '', content: '' });
const safetyArr = ref([3, 4, 5, 6, 8, 9, 10]);

onMounted(() => {
  state.equipNickName = props.equip.equipNickName;
  state.installArea = props.equip.installArea;
  state.actualUserName = props.equip.actualUserName;
  state.alarmTimeRange = props.equip.alarmTimeRange;
  state.valveState = props.equip.relationObject.valveState;
});

const showSetEquipPopup = (type: string, content: any) => {
  setInfo.type = type;
  setInfo.content = content;
  useControllerStore().$patch({ setEquipInfoPopup: true });
};

const handleValveChange = (e: any) => {
  let curState = e.detail ? 1 : 0;
  showModal(e.detail ? '是否关闭燃气阀门？' : '是否打开燃气阀门？', {
    showCancel: true,
    success: (res) => {
      if (res.confirm) {
        EquipRequest.UpdateGasValveState({ equipId: props.equip.equipId, valveState: curState }).then((res) => {
          showToast('操作成功', 'success');
          state.valveState = curState;
        });
      }
    },
  });
};

const handleChangeValue = (payload: { type: string; content: any }) => {
  switch (payload.type) {
    case 'nickName':
      state.equipNickName = payload.content;
      break;
    case 'installArea':
      state.installArea = payload.content;
      break;
    case 'alarmTime':
      state.alarmTimeRange = payload.content;
      break;
    case 'owner':
      state.actualUserName = payload.content;
      break;
  }
};

const handleClickOperate = (type: string) => {
  switch (type) {
    case 'alarmRecord':
      navigate({ url: '/subcontract/equipment/equipDetail/viewAlarmRecords?equipId=' + props.equip.equipId });
      break;
    case 'addressBook':
      navigate({ url: '/subcontract/equipment/addressBook/index?equipId=' + props.equip.equipId + '&equipType=1' });
      break;
    case 'checkReport':
      navigate({ url: '/subcontract/equipment/checkReport?equipId=' + props.equip.equipId + '&type=' + props.equip.equipType });
      break;
    case 'openCamera':
      navigate({ url: '/subcontract/equipment/checkReport?equipId=' + props.equip.equipId + '&type=' + props.equip.equipType });
      break;
    case 'cancelAlarm':
      showModal('确定解除警报吗？', {
        showCancel: true,
        cancelText: '误触发',
        confirmText: '已处理',
        success: (res) => {
          EquipRequest.CancelEquipAlarm({ equipId: props.equip.equipId, cancelReason: res.confirm ? 2 : 1 }).then((res) => {
            showToast('警报已解除', 'success');
          });
        },
      });
      break;
    case 'unbindEquip':
      showModal('是否解绑当前设备？', {
        showCancel: true,
        success: (res) => {
          if (res.confirm) {
            EquipRequest.UnbindingEquip({ id: props.equip.equipId }).then((res) => {
              showToast('解绑成功', 'success');
              setTimeout(() => {
                navigate({ url: '', type: 'navigateBack' });
              }, 1000);
            });
          }
        },
      });
      break;
  }
};
</script>
